<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Restaurant Search Application</title>
    <style type="text/css" media="screen">
      body {
        font-family : arial, sans-serif;
      }
      #spacer { width : 10px; }
      #friendWrapperCanvas {
        border : 2px solid #979797;
        width : 100%;
        height : 100px;
      }
      #mapWrapperCanvas {
        border : 2px solid #979797;
        width : 100%;
        height : 380px;
      }
      #mapCanvas {
        border : 2px solid #979797;
        height : 380px;
        width : 100%;
      }
      #resultsCanvas {
        position : relative;
        top : 15px;
        left : 0px;
        height : 370px;
        width : 280px;
      }
      #mapSearch {
        position: relative;
        top : 0px;
        left : 0px;
      }
      .mapcanvastable td {
        padding : 0px;
      }
      .mapcanvastable {
        border-width : 0px;
        border-spacing : 0px;
        border-collapse : collapse;
        border : none;
        padding : 0px;
      }

      /* canvas view css over-rides */
      #mapCanvas .gels {
        width : 280px;
        background-color: #ddeeff;
      }
      #mapCanvas .gels-form {
        background-color: #ddeeff;
      }

      #mapWrapperCanvas .gels-controls {
        position : absolute;
        bottom : -2px;
        left : 0px;
      }
      #mapWrapperCanvas .gels-app,
      #mapWrapperCanvas .gels-extresults-active {
        border : none;
      }
      #mapWrapperCanvas .gels-list-item {
        margin-bottom : 2px;
      }
      #mapWrapperCanvas .gels-list-wrapper {
        padding-left : 0px;
      }
    </style>
    <script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
    <script type="text/javascript">
    google.load("maps", "2");
    google.load("elements", "1", {
      packages : ["localsearch"]
    });
    
    function initialize() {
      var mapCanvas = document.getElementById("mapCanvas");
      var resultsCanvas = document.getElementById("resultsCanvas");
    
      var map2 = new google.maps.Map2(mapCanvas);
      map2.setMapType(G_NORMAL_MAP);
      map2.removeMapType(G_HYBRID_MAP);
      map2.addMapType(G_NORMAL_MAP);
      map2.addControl(new google.maps.MenuMapTypeControl());
      map2.setCenter(new google.maps.LatLng(37.773, -122.417), 13);
      // Set where the results will appear
      options = new Object();
      options.resultList = resultsCanvas;
      options.resultFormat = "multi-line1";
      var lsc2 = new google.elements.LocalSearch(options);
      map2.addControl(lsc2, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(-282, -2)));
    }
    google.setOnLoadCallback(initialize);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="mapWrapperCanvas">
      <table class="mapcanvastable" style="width:100%;">
        <td style="width:280px">
          <div id="mapSearch"></div>
          <div id="resultsCanvas"></div>
        </td>
        <td>
          <div id="mapCanvas">   
          </div>
        </td>
      </table>
    </div>
    <div id="friendWrapperCanvas">
		<h3>Want to share your favorite Restaurant ?</h3>
		<form name="comment_form" method="post">
			<div id="user">
				<fb:login-button length='long' onlogin="update_user_box();"></fb:login-button>
			</div>
		</form>
    </div>
<script type="text/javascript">
function update_user_box() {
var user_box = document.getElementById("user");

user_box.innerHTML =
"<span>" +
      "<table>" +
           "<td>" +
               "<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>" +
           "</td>" +
           "<td>" +
               "<fb:name uid='loggedinuser' useyou='false'></fb:name>" +
               " can <input type=\"button\" onclick=\"submitComment();\" value=\"Recommend\"> a restaurant." +
           "</td>" +
      "</table>" +
+ "</span>";

FB.XFBML.Host.parseDomTree();
}

function submitComment() {
    FB.Connect.streamPublish(null, null, null, null, "Share your favorite Restaurant...", null, false, null); 
}

</script>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"> </script>
<script type="text/javascript">
    var api_key = "254997461277164";
    var channel_path = "xd_receiver.htm";
    FB.init(api_key, channel_path);
</script>
  </body>
</html>